<template>
    <el-dialog v-model="dialogVisible"
    :title="requestParam.id==null||requestParam.id==''?pageDict.addRole : pageDict.editRole" 
    width="30%">
        <el-form :model="requestParam" ref="form" label-position="top" label-width="80px">
            <el-form-item :label="pageDict.name" prop="name">
                <el-input size="large" v-model="requestParam.name" :placeholder="pageDict.name"></el-input>
            </el-form-item>

            <el-form-item :label="pageDict.code" prop="code">
                <el-input size="large" v-model="requestParam.code" :placeholder="pageDict.code"></el-input>
            </el-form-item>

            <el-form-item :label="pageDict.description" prop="description">
                <el-input 
                type="textarea"
                v-model="requestParam.description" :placeholder="pageDict.description"></el-input>
            </el-form-item>
        </el-form>
        <span class="dialog-footer">
            <el-button @click="close">{{ store.appFront.cancel }}</el-button>
            <el-button type="primary" @click="submit">{{ store.appFront.confirm }}</el-button>
        </span>
        <div style="height: 20px;"></div>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, defineExpose, defineEmits,defineProps } from 'vue';
import $kt from '@/vueKantboot';
import { ElMessage } from 'element-plus';
import { useStore } from '@/stores/counter';


defineProps(["pageDict"]);

let store = useStore();
let dialogVisible = ref(false);

let requestParam = ref({
    id: '',
    name: '',
    description: '',
    code: ''
});

let close = () => {
    dialogVisible.value = false;
}

let open = (item:any) => {
    if(item!=null) {
        requestParam.value = JSON.parse(JSON.stringify(item));
    }else {
        requestParam.value.id = '';
        requestParam.value.name = '';
        requestParam.value.description = '';
        requestParam.value.code = '';
    }
    dialogVisible.value = true;
}

const emits = defineEmits(["flush"]);
let submit = () => {

    if(requestParam.value.name == '') {
        ElMessage({
            message: '请输入分组名称',
            type: 'error',
        });
        return false;
    }

    if(requestParam.value.description == '') {
        ElMessage({
            message: '请输入分组描述',
            type: 'error',
        });
        return false;
    }

    if(requestParam.value.code == '') {
        ElMessage({
            message: '请输入分组编码',
            type: 'error',
        });
        return false;
    }
    
    $kt.request.request({
        url: '/adminManage/system/role/save',
        method: 'post',
        data: requestParam.value
    }).then((res: any) => {
        if(res.data.state != 2000) {
            ElMessage({
                message: res.data.errMsg,
                type: 'error',
            });
            return false;
        }
        ElMessage({
            message: res.data.msg,
            type: 'success',
        });

        // 重置requestParam
        requestParam.value.name = '';
        requestParam.value.description = '';
        requestParam.value.code = '';
        

        close();
        emits("flush");
    });
}

defineExpose({
    open,
    close
});
</script>

<style lang="scss" scoped>
.dialog-footer {
    float: right;
}
</style>